<template>
  <div id='colorBasic' ref='colorBasic'
  :class="{currentBasic: isCurrent}"
>
    <button
      ref="button"
      :class="{mt0: isCurrent}"
      @mousedown='mouseDown'
    >
      {{ color_basic[0] }}
    </button>
  </div>
</template>

<script>
export default {
  name:'colorBasic',
  props:['color_basic','isCurrent'],
  
  methods:{
    mouseDown(event) {
      let basic = this.$refs.colorBasic
      let [origin_x,origin_y] = [parseInt(basic.style.left.slice(0,-2)),parseInt(basic.style.top.slice(0,-2))]
      document.onmousemove = (e) => {
          basic.style.left = e.clientX-event.clientX + origin_x + 'px'
          basic.style.top = e.clientY-event.clientY + origin_y + 'px'
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        basic.style.left = origin_x  + 'px'
        basic.style.top = origin_y + 'px'
        this.$emit('moveColorBasic')
      };
      
    },
  }
}
</script>

<style scoped>

#colorBasic {
  box-sizing:border-box;
  position: absolute;
  height: 100px;
  width: 100px;
  font-size: 20px;
}
.currentBasic {
  border: 10px solid rgb(0, 0, 0);
  z-index:10;
}
.mt0 {
  margin-top:0;
}

button{
  margin-top:10px;
  height: 80px;
  width: 80px;
  font-size: 20px;
  border: 0;
  background-color: rgba(0,0,0,0)
}

button:focus{
  outline:none;
}

</style>